<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box {
				width: 800px;
				height: 500px;
				border: 1px solid blue;
				margin: 0 auto;

			}

			.box .node {
				width: 200px;
				height: 100px;
				border: 1px solid seagreen;
				background: seagreen;
				cursor: pointer;
				position: absolute;
			}

			.spot {
				height: 5px;
				width: 5px;
				background: #000;
				position: absolute;
			}
		</style>
	</head>
	<body>
		<div class="box" style="clear: both;">
			<div class="node" id="node" mousedown="nDown(this)" mousemove="nMove(this)" mouseup="nUp(this)"></div>
		</div>

	</body>

	<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
	</script>
	<script type="text/javascript">
		var node = document.getElementsByClassName("node")[0];
		var x, y;
		node.onmousedown = function(e) {
			var e = e || window.event;
			x = e.clientX - this.offsetLeft;
			y = e.clientY - this.offsetTop;
			console.log("元素被选中，当前坐标为：", x, y)
		}
		node.onmousemove = function(e) {
			var e = e || window.event;
			var moveX = e.clientX - x;
			var moveY = e.clientY - y;
			console.log("移动中：", moveX, moveY)
			var dx = e.clientX + "px";
			var dy = e.clientY + "px";
			this.style.left = moveX + "px";
			this.style.top = moveY + "px";
			/* 在经过的每一个点上画一个spot */
			$(".box").append("<div class='spot' style=\"top:" + dx + ";left:" + dy + ";\"></div>");

		}
		node.mouseup = function(e) {
			var e = e || window.event;
			x = e.clientX - this.offsetLeft;
			y = e.clientY - this.offsetTop;
		}
		window.onload = function() {

		}
	</script>
</html>
